<template>
	<view>
		<view class="flex u-m-t-20">
			<view class="x-nav-left">
				<view>
					<block v-for="(item,z) in typelist" :key="z">
						<view @click="select(item.id,z)" :class="current==z?'cur':''" class="text-center cell ">
							{{item.deptName}}
						</view>
					</block>
				</view>
			</view>
			<view class="x-nav-right">
				<scroll-view class="scroll-view_H" :scroll-y="true" @scrolltolower="scrolltolower">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"
						v-if="productInfoList.length==0" style="margin-right: 50rpx;">
					</u-empty>
					<view class="flex flex-wrap">
						<block v-for="(item,i) in productInfoList" :key="i">
							<view @click="$u.route('/subpkg/goods/details',{id:item.id})" class="u-m-l-24 u-m-b-28">
								<u-image :showLoading="true" mode="aspectFill" radius="8rpx" :src="item.showImg"
									width="220rpx" height="220rpx">
									<view slot="loading">
										<u-loading-icon></u-loading-icon>
									</view>
								</u-image>
								<view>
									<view class="text-black u-m-t-10 u-font-sm name">{{item.title}}</view>
									<view class="u-font-24 text999">{{item.brand?item.brand:'无'}}</view>
									<view class="flex align-center justify-between">
										<view class="price">
											<text class="u-font-xs text-red">￥</text>
											<text
												class="u-font-32 text-bold text-red">{{parseFloat(item.priceStart).toFixed(2)}}</text>
										</view>

									</view>
								</view>
								
								<view class="flex u-col-center u-row-between u-m-t-20">
									<view class="text-green" @click.stop="handleEditGood(item.id)">编辑</view>
									<view class="text-green" @click.stop="handleDeleteGood(item.id)">删除</view>
								</view>
							</view>
						</block>
					</view>
					<!-- <empty :show="brandlist.length==0"></empty> -->
				</scroll-view>
			</view>
		</view>

		<view class="footer flex align-center justify-between">
			<view class="flex align-center">
				<view class="flex align-center flex-direction" @click="$u.route('/subpkg/goods/addGoods')">
					<u-icon name="/static/subpkg/addgoods.png" size="44rpx"></u-icon>
					<view class="u-font-24 u-m-t-10" style="color: #282828;">添加商品</view>
				</view>
			</view>
		</view>
		<u-modal :show="show" :title="title" :content='content' showCancelButton="true" @cancel="handleCancelDelete()" @confirm="handleConfirm()"></u-modal>
	
		<!-- <u-tabbar :value="tab" :fixed="true" :placeholder="true" activeColor="#FF5B00" :safeAreaInsetBottom="true">
			<u-tabbar-item text="订单" icon="home" @click="toRoute('/subpkg/order/order')" name="order"></u-tabbar-item>
			<u-tabbar-item text="账单" icon="list" @click="toRoute('/subpkg/bill/bill')" name="bill"></u-tabbar-item>
			<u-tabbar-item text="商品" icon="bag"  name="product"></u-tabbar-item>
		</u-tabbar> -->
		
		<view @click="$u.route('/subpkg/goods/addGoods')" class="add">
			<u-icon name="plus" color="#fff" size="20"></u-icon>
		</view>
		
	</view>
</template>

<script>
	import {
		getRubbishType,
		getProductInfoList,
		getEquInfoList,
		deleteGoods
	} from '@/common/api/api.js'

	export default {
		data() {
			return {
				tab: 'product',
				type_name: '',
				params: {
					page: 1,
					take: 10,
					network_id: '',
					type_id: ''
				},
				brandlist: [], //品牌
				typelist: [], //类型
				productInfoList: [],
				keyword: '',
				current: 0,
				busType: 1,
				stageInfoList: [],
				companyId: '',
				typeId: '',
				title:"删除提示",
				content:'您确定要删除商品吗？',
				show:false,
				ids:[],
			}
		},
		onShow: function() {
			this.handleGetInfo();
		},
		onLoad() {

		},
		mounted() {
			// 监听返回事件并刷新页面
			uni.$on('goodsBack', this.onNavigateTo);
			 
		},
		beforeDestroy() {
			// 移除返回事件
			uni.$off('goodsBack', this.onNavigateTo);
		 
		},
		methods: {
			toRoute(url) {
				uni.redirectTo({
					url: url
				})
			},
			// 
			handleCancelDelete(){
			  this.show=false	
			},
			handleConfirm(){
				let that=this;
				deleteGoods({ids:that.ids}).then(res=>{
					if(res.code==200){
						uni.$u.toast("删除商品成功");
						that.handleGetInfo();
						that.show=false;
					}
				})
			},
			// 编辑edit
			handleEditGood(id){
			this.$u.route('/subpkg/goods/addGoods?id='+id);
			},
			// 删除
			handleDeleteGood(id){
				this.show=true;
				this.ids=id;
				
			},
			// onNavigateTo
			onNavigateTo(){
			 this.handleGetInfo();	
			},
			// 获取列表
			handleGetInfo(){
				this.companyId = this.$store.state.$userInfo.companyId;
				this.handleGetGoodTypelist();
				console.log("userinfo", this.$store.state.$userInfo)
			},
			// 如果是商城获取商家列表
			handleGetEquInfoList() {
				let that = this;
				uni.getLocation({
					type: 'wgs84', //gcj02
					success: function(res) {
						let lat = res.latitude;
						let lng = res.longitude;
						console.log("lat,lan", lat, lng, res);
						getEquInfoList({
							lng: lng,
							lat: lat
						}).then(res => {
							that.stageInfoList = res.data.list;
						})
					},
					fail: function(e) {
						console.log('定位失败')
						console.log(e)
					}
				})
			},
			//获取类型
			handleGetGoodTypelist() {
				getRubbishType({
					level: 1,
					id: '',
					busType: this.busType,
					companyId: this.companyId
				}).then(res => {
					this.typelist = res.data;
					if (this.typeId) {
						res.data.map((item, index) => {
							if (item.id == this.typeId) {
								this.current = index;
							}
						})
						this.handleGetGoodslist({
							rubbishTypeId: this.typeId,
							companyId: this.companyId
						});
					} else {
						this.handleGetGoodslist({
							rubbishTypeId: res.data[0].id,
							companyId: this.companyId
						});
					}

				})
			},
			// 获取产品信息
			handleGetGoodslist(params) {
				let that = this;
				getProductInfoList(params).then(res => {
					if (res.data.length == 0) {
						return;
					}
					that.productInfoList = res.data.list.map(item => {
						item.showImg = JSON.parse(item.indexImg)[0];
						return item;
					});

				})
			},
			handleAddCart(id) {
				if (!this.$store.state.$token) {
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1000)
					return;
				}
				addCart({
					goods_id: id,
					openid: this.$store.state.$userInfo.openid,
					network_id: this.$store.state.$network.id,
					number: 1,
				}).then(res => {
					uni.$u.toast('加入购物车成功');
				})
			},
			select(id, z) {
				this.current = z;
				this.typeId=id;
				this.handleGetGoodslist({
					rubbishTypeId: id,
					companyId: this.companyId
				});
			},
			scrolltolower() {
				this.handleGetGoodslist({
					rubbishTypeId: this.typeId,
					companyId: this.companyId
				});
			},
			// 购物车

		}
	}
</script>

<style>
	page {
		background-color: #ffffff;
	}
</style>
<style lang="scss">
	.border {
		border: 1px solid red;
	}

	.search-css {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9999;

		.status-bar {
			position: relative;
			z-index: 999;
			background-color: #ffffff;
		}

		.search-item {
			position: relative;
			z-index: 999;
			background-color: #ffffff;

			.scan-css {
				position: absolute;
				right: 46rpx;
				background-color: #fff;
				top: 40rpx;
				border-left: 1px solid #EFF1F2;
				padding-left: 20rpx;
				font-size: 24rpx;
				color: #333333;
			}
		}
	}

	.scroll-view_H {
		// #ifdef MP-WEIXIN
		height: calc(100vh - 40rpx);
		//#endif
	}

	.x-nav-left {
		width: 200rpx;
		text-align: center;
		background-color: #F4F8F9;
		// border-top-right-radius: 20rpx;
		// #ifdef H5
		height: calc(100vh - 130rpx);
		//#endif

		// #ifdef MP-WEIXIN || MP-TOUTIAO
		height: calc(100vh - 20rpx);
		//#endif
		overflow-y: auto;
		color: #555553;

		.cell {
			height: 120rpx;
			line-height: 120rpx;
		}
	}

	.x-nav-right {
		width: 550rpx;
		background-color: #ffffff;
		// #ifdef APP-PLUS
		height: calc(100vh - 208rpx);
		//#endif
		// #ifdef MP-WEIXIN || MP-TOUTIAO
		height: calc(100vh - 20rpx);
		//#endif
	}

	.cur {
		position: relative;
		color: #FF5B00;
		font-weight: bold;
		background-color: #ffffff;
	}

	.cur::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 8rpx;
		background: linear-gradient(313deg, #FF5B00 0%, #FF5B00 100%);
		border-radius: 0px 2px 2px 0px;
	}

	.text-black {
		color: #333;
	}

	.text-bold {
		font-weight: 800;
	}

	.flex {
		display: flex;
	}

	.flex-wrap {
		flex-wrap: wrap;
	}

	.price {
		color: #333333;
	}

	.name {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		color: #666666;
		font-size: 28rpx;
	}

	.add {
		width: 36rpx;
		height: 36rpx;
		background: #FF5B00;
		border-radius: 4rpx;
		color: #fff;
		text-align: center;
		line-height: 36rpx;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #FFFFFF;
		padding: 20rpx 32rpx;

		.btn {
			width: 190rpx;
			height: 84rpx;
			line-height: 84rpx;
			text-align: center;
			background: #FF5B00;
			border-radius: 8rpx;
			font-size: 26rpx;
			color: #fff;
		}
	}
	
	.text-green{
		color:  #FF5B00;
		font-size: 26rpx;
	}
	
	.add{
		position: fixed;
		right: 50rpx;
		bottom: 200rpx;
		width: 100rpx;
		height: 100rpx;
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>